<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8" />

<link rel="icon" type="image/png" href="/images/epoolSmall.png" />

<link rel="stylesheet"
	href="http://code.jquery.com/ui/1.10.4/themes/eggplant/jquery-ui.css" />
<script type='text/javascript' src='https://www.google.com/jsapi'></script>

<script
	src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization"></script>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<style>
#map-canvas {
	width: 800px;
	height: 700px;
}
</style>

<script>
//src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBkH0fctTSIgzE7OZmotklrdp5gZDa1n2o&sensor=false&libraries=visualization">
	jQuery(function() {
		jQuery("#tabs").tabs();
		jQuery('#tabs').tabs("option", "active", 0);
	});
</script>

<script>
	function sleep(milliseconds) {
		var start = new Date().getTime();
		console.log("in sleep");
		for (var i = 0; i < 1e7; i++) {
			if ((new Date().getTime() - start) > milliseconds) {
				break;
			}
		}
	}
</script>

<script>
	jQuery(function() {
		var geocoder = new google.maps.Geocoder();
		var map;
		var lat;
		var lng;
		var map, pointarray, heatmap;
		var crimeType = "all";
		var crimeData = [];
		var cannabisImage = {
				url : 'cannabis.png',
				// This marker is 20 pixels wide by 32 pixels tall.
				size : new google.maps.Size(32, 32),
				scaledSize : new google.maps.Size(30,
						30),
				// The origin for this image is 0,0.
				origin : new google.maps.Point(0, 0),
				// The anchor for this image is the base of the flagpole at 0,32.
				anchor : new google.maps.Point(0, 32)
			};
		var thbImage = {
				url : 'thb.png',
				// This marker is 20 pixels wide by 32 pixels tall.
				size : new google.maps.Size(32, 32),
				scaledSize : new google.maps.Size(30, 30),
				// The origin for this image is 0,0.
				origin : new google.maps.Point(0, 0),
				// The anchor for this image is the base of the flagpole at 0,32.
				anchor : new google.maps.Point(0, 32)
			};

			var drugsImage = {
				url : 'drugs.png',
				// This marker is 20 pixels wide by 32 pixels tall.
				size : new google.maps.Size(32, 32),
				scaledSize : new google.maps.Size(30, 30),
				// The origin for this image is 0,0.
				origin : new google.maps.Point(0, 0),
				// The anchor for this image is the base of the flagpole at 0,32.
				anchor : new google.maps.Point(0, 32)
			};
	

		function drawMap() {
			latlng = new google.maps.LatLng(53.37674, -1.468016);
			pointarray = [];
			crimeData = [];
			//latlng = new google.maps.LatLng(lat, lng);
			console.log("in draw map");
			var mapOptions = {
				zoom : 6,
				center : latlng,
				mapTypeId : google.maps.MapTypeId.SATELLITE
			};

			map = new google.maps.Map(document.getElementById('map-canvas'),
					mapOptions);

			//	var policeUrl = "http://data.police.uk/api/crimes-street/all-crime?lat="
			//			+ lat + "&lng=" + lng;
			console.log("just before getjson");

			jQuery.getJSON("concepts7.json", function(data) {
			//jQuery.getJSON("concepts8small.json", function(data) {

				jQuery.each(data, function(key, val) {
					console.log("in jqe");

					jQuery.each(val, function(index, threat) {
						
						var address2 = threat.attributes.location;
						var dr = threat.attributes.drugreference;
						var obj = threat.objects;			
					
						geocoder
						.geocode(
								{
									'address' : address2

								},
								function(results, status) {

									console.log("status " + status + " address1P "
											+ address2);

									if (status == google.maps.GeocoderStatus.OK) {
										console
												.log("address "
														+ address2
														+ " geo formated: "
														+ results[0].formatted_address
														+ " partial: "
														+ results[0].partial_match
														+ " dr os "
														+ dr
														+ " longName "
														+ results[0].address_components[0].long_name);
										var location = results[0].geometry.location;
								

										lat = location.lat();
										lng = location.lng();
										console.log(" lat is " + lat + " long is "
												+ lng);
										var ocLatlng = new google.maps.LatLng(lat,
												lng);

										if (dr == "cannabis") {
											threatImage = cannabisImage;
										} else
											threatImage = drugsImage;
					

										var infoString = '<p style="color:blue;"> Description: <b>'
												+ dr
												+ '</b></p>'
												+ '<p style="color:purple;"> location in json data: <b> '
												+  address2 +  '</b></p>' 
												+ '<p style="color:purple;"> Google geocoded location: <b> '
												+  results[0].formatted_address +  '</b></p>' 
												+ '<p style="color:purple;"> Google partial match value: <b>'
												+  results[0].partial_match +  '</b></p>' 
												+ '<p style="color:green;"> Objects: <b>'
												+ obj + '</b></p>';

										var infowindow = new google.maps.InfoWindow(
												{
													content : infoString
												});

										var marker2 = new google.maps.Marker({
											position : ocLatlng,
											map : map,
											icon : threatImage,
											title : dr
										});

										google.maps.event.addListener(marker2,
												'click', function() {
													infowindow.open(map, marker2);
												});
						
									} else {
										console
												.log('Geocode was not successful for the following reason: '
														+ status
														+ " address: "
														+ address2);
									}
								});

					});

				});

			}).fail(function(jqxhr) {
				console.log(" fail: " + jqxhr.responseText);
			});
		}	
		jQuery(document).ready(drawMap());

	});
</script>

<style>
#map {
	width: 500px;
	height: 500px;
}

body {
	font-family: arial; /* Font */
	font-size: 12px; /* Font Size */
}
</style>
</head>
<body>
	<h1>Organised Crime Visual Alarm Tool</h1>
	<div id="tabs">
		<ul>
			<li><a href="#tabs-1">FCA OC Threats</a></li>
		</ul>
		<div id="tabs-1">
			<p>OC threats from FCA analysis</p>
			<div id="map-canvas"></div>
		</div>
</body>
</html>